<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Chenqiu
 * @LastEditTime: 2021-09-23 18:38:12
-->
<template>
  <!-- 写在vue的template标签中只允许存放一个div根标签 -->
  <div>
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
      <!-- {{carousels}} -->
      <div class="carousel">
        <el-carousel height="300px">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 板块 -->
      <div class="plates">
        <div class="wrapper">
          <!-- {{categoryList}} -->
          <div class="plate" v-for="cas in categoryList" :key="cas.category.id">
            <div class="head">
              <div class="title">{{ cas.category.name }}</div>
              <div class="more" @click="toJump(cas.category)">&#47;MORE&gt;&gt;</div>
            </div>
            <ul class="list">
              <li v-for="a in cas.aritcle" @click="toDetails(a.id)" :key="a.id">
                {{ a.title }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>
<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import { get } from "../utils/request";
export default {
  // 注册组件
  components: {
    Header,
    Footer,
  },
  // 存储vue变量
  data() {
    return {
      carousels: [],
      categoryList: [],
    };
  },
  // vue在各个阶段执行的函数 生命周期 钩子函数
  created() {
    this.loadCarousel();
    this.loadArticle();
  },
  // 方法 事件处理程序
  methods: {
    // 加载文章
    loadArticle() {
      let url = "/index/article/findCategoryArticles";
      get(url).then((res) => {
        this.categoryList = res.data;
      });
    },
    // 加载轮播图
    loadCarousel() {
      let url = "/index/carousel/findAll";
      // es6箭头函数
      // (a)=>{b}
      // function(a){b}
      get(url).then((resp) => {
        // 箭头函数没有this指向,指向vue实例
        this.carousels = resp.data;
      });
    },
    // 跳转到详情页
    toDetails(id) {
      this.$router.push({
        path: "/article",
        query: { id },
      });
    },
    toJump(item) {
      // 跳转到list页面 编程式路由导航
      this.$router.push({
        // 放跳转的路径和携带的参数
        path: "/list",
        query: item,
      });
    },
  },
};
</script>

<style lang="scss">
// 体部样式
.content {
  background-color: #cfc8cf;
  .carousel {
    margin-bottom: 2%;
    img {
      width: 100%;
    }
  }
  .plates {
    & > .wrapper::after {
      display: block;
      content: " ";
      clear: both;
    }
    .plate {
      float: left;
      width: 32.5%;
      height: 300px;
      background-color: #fff;
      margin-right: 1.25%;
      margin-bottom: 0.8em;
      ul {
        padding: 5%;
      }
      ul.list > li {
        line-height: 2.5em;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      ul > li:hover {
        color: #2e2847;
        cursor: pointer;
      }
      .head {
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 18px;
          font-weight: bold;
          flex: 2;
          width: 30%;
          color: #463f62;
          cursor: pointer;
          // float: left;
          padding: 5%;
          border-bottom: 3px solid #463f62;
        }
        .more {
          font-size: 1.2em;
          border-bottom: 3px solid #ecf6f2;
          color: #463f62;
          cursor: pointer;
          flex: 2;
          padding-left: 40%;
          padding-top: 5%;
          // line-height: 100%;
        }
      }
      .head::after {
        display: block;
        content: "";
        clear: both;
      }
    }
    .plate:nth-child(3n) {
      margin-right: 0px;
    }
  }
}
</style>